<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录</title>
    <script src="/js/jquery-3.2.1.min.js"></script>
    <script type="text/javascript">
        $(function () {
            //点击事件,展示滑块
            $("#but").click(function () {
                $("#wrapper").show();
            });

            $("#drag").drag();
        });

        //验证核实admin的Ajax
        function load() {
            var uname = $("#uname").val();
            var upass = $("#upass").val();
            var radio = $('input:radio:checked').val()
            $.get("/applets/admin/getOne", {"uname": uname, "upass": upass, "radio": radio}, function (data) {
                if (data.code != 0) {
                    alert(data.msg);
                    location.href = "AdminLogin.html";
                    // $("#wrapper").hide();
                    return;
                } else {
                    alert(data.msg);

                    location.href = data.data;
                }
            })
        }

        /**
         * 滑块的jq
         * @param options
         */
        $.fn.drag = function (options) {
            var x, drag = this, isMove = false, defaults = {};
            var options = $.extend(defaults, options);
            var handler = drag.find('.handler');
            var drag_bg = drag.find('.drag_bg');
            var text = drag.find('.drag_text');
            var maxWidth = drag.width() - handler.width();  //能滑动的最大间距

            //鼠标按下时候的x轴的位置
            handler.mousedown(function (e) {
                isMove = true;
                x = e.pageX - parseInt(handler.css('left'), 10);
            });

            //鼠标指针在上下文移动时，移动距离大于0小于最大间距，滑块x轴位置等于鼠标移动距离
            $(document).mousemove(function (e) {
                var _x = e.pageX - x;// _x = e.pageX - (e.pageX - parseInt(handler.css('left'), 10)) = x
                if (isMove) {
                    if (_x > 0 && _x <= maxWidth) {
                        handler.css({'left': _x});
                        drag_bg.css({'width': _x});
                    } else if (_x > maxWidth) {  //鼠标指针移动距离达到最大时清空事件
                        dragOk();
                    }
                }
            }).mouseup(function (e) {
                isMove = false;
                var _x = e.pageX - x;
                if (_x < maxWidth) { //鼠标松开时，如果没有达到最大距离位置，滑块就返回初始位置
                    handler.css({'left': 0});
                    drag_bg.css({'width': 0});
                }
            });

            //清空事件
            function dragOk() {
                handler.removeClass('handler_bg').addClass('handler_ok_bg');
                text.removeClass('slidetounlock').text('验证通过').css({'color': '#fff'});       //modify
                // drag.css({'color': '#fff !important'});

                handler.css({'left': maxWidth});                   // add
                drag_bg.css({'width': maxWidth});                  // add

                handler.unbind('mousedown');
                $(document).unbind('mousemove');
                $(document).unbind('mouseup');
                //执行Ajax
                load();
            }
        };


    </script>

    <!--滑块的css-->
    <style type="text/css">
        .slidetounlock {
            font-size: 12px;
            background: -webkit-gradient(linear, left top, right top, color-stop(0, #4d4d4d), color-stop(.4, #4d4d4d), color-stop(.5, #fff), color-stop(.6, #4d4d4d), color-stop(1, #4d4d4d));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            -webkit-animation: slidetounlock 3s infinite;
            -webkit-text-size-adjust: none
        }

        @-webkit-keyframes slidetounlock {
            0% {
                background-position: -200px 0
            }
            100% {
                background-position: 200px 0
            }
        }

        #drag {
            position: relative;
            background-color: #e8e8e8;
            width: 300px;
            height: 34px;
            line-height: 34px;
            text-align: center;
        }

        #drag .handler {
            position: absolute;
            top: 0px;
            left: 0px;
            width: 40px;
            height: 32px;
            border: 1px solid #ccc;
            cursor: move;
        }

        .handler_bg {
            background: #fff url("../img/slider.png") no-repeat center;
        }

        .handler_ok_bg {
            background: #fff url("../img/complet.png") no-repeat center;
        }

        #drag .drag_bg {
            background-color: #7ac23c;
            height: 34px;
            width: 0px;
        }

        #drag .drag_text {
            position: absolute;
            top: 0px;
            width: 300px;
            color: #9c9c9c;
            -moz-user-select: none;
            -webkit-user-select: none;
            user-select: none;
            -o-user-select: none;
            -ms-user-select: none;
            font-size: 12px;
        }
    </style>
</head>
<body>
<span>用户登录</span>
<form action="#" method="post">
    <P><input type="text" name="uname" id="uname" placeholder="用户名"></P>
    <P><input type="password" name="upass" id="upass" placeholder="密码"></P>
    <p>
        <input type="radio" name="role" value="1">我是管理员
        <input type="radio" name="role" value="0">我是用户
    </p>
    <input type="button" id="but" value="登录">
</form>

<!--滑块的代码-->
<div id="wrapper" style="position: relative;top: 150px;left:500px;" hidden>
    <div id="drag">
        <div class="drag_bg"></div>
        <div class="drag_text slidetounlock" onselectstart="return false;" unselectable="on">
            请按住滑块，拖动到最右边
        </div>
        <div class="handler handler_bg"></div>
    </div>
</div>
</body>
</html>